<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <!--jquery 鼠标滚动组件-->
    <script type="text/javascript" src="jquery.mousewheel.min.js"></script>
    <!-- 拖拽和缩放 -->
    <script type="text/javascript" src="dragZoom.js"></script>
    <title></title>

</head>

<body style="margin:0;padding:0;">
    <div id="box" style="width: 800px;height: 500px;margin:50px auto;border:1px solid red; background: #fff;position:relative;overflow:hidden;">
        <img src="1.jpg" style="background-color: Gray;position:absolute;width:200px;height:100px;top:100px;left:200px;" id="pan" />
    </div>
</body>
<script type="text/javascript">
    $(function() {
        $('#pan').dragZoom({
            scope: $("body"),
            zoom: 1,
            onWheelStart: function() {

            }
        }, function() {});
    });
</script>

</html>